<template lang="html">
  <div>
    <div v-show="showError" class="error-text" v-text="error"></div>
    <div v-show="!showError">
    <stage-header :userInfo="userInfo"></stage-header>
    <stage-normal :normalData="normalData"></stage-normal>
    <stage-read :readData="readData"></stage-read>
    <stage-grow :growData="growAllData" v-if="growAllData.classtest"></stage-grow>
    <stage-sum v-if="abilityData.length" :testData="testData" :typeData="typeData"
               :abilityData="abilityData" :userInfo="userInfo"></stage-sum>
    <div class="footer-box"></div>
    </div>
  </div>
</template>

<script>
  import StageHeader from '@/components/stageHeader'
  import StageNormal from '@/components/stageNormal'
  import StageRead from '@/components/stageRead'
  import StageGrow from '@/components/stageGrow'
  import StageSum from '@/components/stageSum'
   import axios from '~common/assets/js/axios.js'
  import { Loading } from 'element-ui'
  export default {
    data () {
      return {
        stageBaseData: [], // 基础数据
        error: '',  // 错误数据
        showError: true, // 报告未生成是否展示
        userInfo: {}, // 用户信息
        readData: {}, // 晨读数据
        normalData: {},  // 习惯养成
        testData: {}, // 总测评数据
        typeData: [], // 我的分数各项数据
        abilityData: [], // 能力模型数据
        growAllData: [] // 成长模块数据
      }
    },
    components: {
      StageHeader,
      StageNormal,
      StageRead,
      StageGrow,
      StageSum
    },
    mounted () {
      // 停留25秒人数
      setTimeout(() => {
        window.xesWeb_eventLog.xesEventLog('pageLoad', 'stageTestStayTime=' + 25)
      }, 25000)
      // 滚动到底部的人数
      window.onscroll = () => {
        let lastHeight = document.documentElement.scrollHeight - window.innerHeight
        if (lastHeight - 20 <= (document.documentElement.scrollTop || document.body.scrollTop)) {
          window.xesWeb_eventLog.xesEventLog('pageLoad', 'stageTestRollBottom=' + 1)
          window.onscroll = null
        }
      }
      this.startLoading()
      this.init()
    },
    methods: {
      init () {  // 获取数据
               let url = 'https://easy-mock.com/mock/5afba9594b137966440b2295/stagebase/base'  // mock数据
        // let url = '/libarts/StudyReport/stageTest'
        let userInfo = window.userInfo
        axios.post(url, {
          stuId: userInfo.stuId,
          courseId: userInfo.courseId,
          planId: userInfo.planId
        }).then((res) => {
          if (res.stat == 1) {
            this.showError = false
            let data = res.data
            this.stageBaseData = data
            this.userInfo = this.stageBaseData.user
            this.normalData = this.stageBaseData.class
            this.readData = this.stageBaseData.mornread
            this.testData = this.stageBaseData.stagetestscore
            this.typeData = this.stageBaseData.testtype
            this.abilityData = this.stageBaseData.abilitymodel
            this.growAllData = this.stageBaseData.growdata
          } else {
            this.showError = true
            this.error = '报告未生成'
          }
          this.endLoading()
        }).catch(() => {
          console.log('record error')
        })
      },
      startLoading () {  // 开始加载
        this.loading = Loading.service({
          text: '加载中......',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      }, // 关闭loadin
      endLoading () {
        this.loading.close()
      }
    }

  }
</script>
<style type="text/css">

  .footer-box {
    width: 100%;
    height: 3.75rem;
    background: url('../assets/img/bottom_bg.png') no-repeat;
    background-size: 100% 100%;
  }

  @media screen and (min-width: 768px) {
    html {
      max-width: 750px;
      font-size: 100px !important;
      margin: 0 auto;
    }
  }
  .error-text{
    font-size: .48rem;
    text-align: center;
    color:#f96900;
    font-weight: 500;
    margin-top: 2rem;
  }
</style>
